<template>
  <div class="page">
    <el-row>
      <el-col :span="12" :offset="6" class="zhuce-block">
        <h3>注册吗喽</h3>
        <el-form ref="form" :model="form" :rules="rules" label-width="150px" class="zhuce-form" size="mini">
          <el-form-item label="吗喽地区" required>
            <el-col :span="11">
              <el-form-item prop="region1">
                <el-select v-model="form.region1" placeholder="请选择">
                  <el-option label="吗喽市" value="taizhou"></el-option>
                  <el-option label="猴市" value="hangzhou"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col class="line" :span="2"></el-col>
            <el-col :span="11">
              <el-form-item prop="region2">
                <el-select v-model="form.region2" placeholder="请选择">
                  <el-option label="吗喽喽区" value="jiaojiang"></el-option>
                  <el-option label="吗喽湾新区" value="xinqu"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-form-item>

          <el-form-item label="吗喽证号码" required prop="idCard" >
            <el-input v-model="form.idCard" placeholder="请输入吗喽证号码" minlength="18" maxlength="18" type="tel"></el-input>
          </el-form-item>

          <el-form-item label="吗喽名" required prop="name">
            <el-input v-model="form.name" placeholder="请填写吗喽姓名，20字以内"></el-input>
          </el-form-item>

          <el-form-item label="吗喽机号码" required prop="phone">
            <el-input v-model="form.phone" placeholder="请输入11位吗喽机号" minlength="11" maxlength="11" type="tel"></el-input>
          </el-form-item>

          <el-form-item label="吗喽邮箱号" required prop="email">
            <el-input v-model="form.email" placeholder="请填写吗喽邮箱"></el-input>
          </el-form-item>

          <el-form-item label="性别" required>
            <el-col :span="11">
              <el-form-item prop="gender">
            <el-select v-model="form.gender" placeholder="请选择" style="width: 100%">
              <el-option label="公" value="male"></el-option>
              <el-option label="母" value="female"></el-option>
            </el-select>
            </el-form-item>
            </el-col>
          </el-form-item>

          <el-form-item label="种族" required>
            <el-col :span="11">
              <el-form-item prop="group">
            <el-select v-model="form.group" placeholder="请选择" style="width: 100%">
              <el-option label="飞天大吗喽" value="han"></el-option>
              <el-option label="霹雳大吗喽" value="hui"></el-option>
              <el-option label="旋风大吗喽" value="weiwuer"></el-option>
            </el-select>
            </el-form-item>
            </el-col>
          </el-form-item>

          <el-form-item label="吗喽面貌" required>
            <el-col :span="11">
              <el-form-item prop="face">
            <el-select v-model="form.face" placeholder="请选择" style="width: 100%">
              <el-option label="群众吗喽" value="qunzhong"></el-option>
              <el-option label="团员吗喽" value="tuanyuan"></el-option>
              <el-option label="党员吗喽" value="dangyuan"></el-option>
            </el-select>
            </el-form-item>
            </el-col>
          </el-form-item>

          <el-form-item label="出生日期" required prop="date">
            <el-col :span="11">
            <el-date-picker type="date" placeholder="请选择日期" v-model="form.date" style="width: 100%"></el-date-picker>
            </el-col>
          </el-form-item>

          <el-form-item label="设置密码" required prop="password1">
            <el-input v-model="form.password1" placeholder="密码长度至少大于等于6位" show-password minlength="6"></el-input>
          </el-form-item>

          <el-form-item label="确认密码" required prop="password2">
            <el-input v-model="form.password2" placeholder="请再次输入密码" show-password minlength="6"></el-input>
          </el-form-item>

          <el-form-item label="" prop="agree">
            <el-checkbox-group v-model="form.agree">
              <el-checkbox label="">
                <span>我已阅读并同意此吗喽协议</span>
                <a href="http://baidu.com" target="_blank">《吗喽注册协议》</a>
              </el-checkbox>
            </el-checkbox-group>
          </el-form-item>

          <el-form-item>
            <el-button type="primary" @click="onSubmit">注册</el-button>
          </el-form-item>
        </el-form>
      </el-col>
    </el-row>
  </div>
</template>
<script>
import { Message } from 'element-ui';

export default {
  data() {
    return {
      form: {
        region1: "",
        region2: "",
        idCard: "",
        name: "",
        phone: "",
        email: "",
        gender: "",
        group: "",
        date: "",
        password1: "",
        password2: "",
        agree: "",
      },
      rules: {
        date: [
          { required: true, message: '请选择日期', trigger: 'blur' }
        ],
        face: [
          { required: true, message: '请选择吗喽面貌', trigger: 'change' }
        ],
        group: [
          { required: true, message: '请选择种族', trigger: 'change' }
        ],
        gender: [
          { required: true, message: '请选择性别', trigger: 'change' },
        ],
        idCard: [
          { required: true, message: '请输入吗喽证号', trigger: 'blur' },
          { min: 18, max: 18, message: '请输入18位的吗喽证号', trigger: 'blur' }
        ],
        name: [
          { required: true, message: '请输入吗喽名', trigger: 'blur' },
          { min: 1, max: 20, message: '请不要大于20个字', trigger: 'blur' }
        ],
        phone: [
          { required: true, message: '请输入吗喽机号码', trigger: 'blur' },
          { min: 11, max: 11, message: '请输入11位吗喽机号', trigger: 'blur' }
        ],
        password1: [
          { required: true, message: '请设置密码', trigger: 'blur' },
          { min: 6, message: '密码长度至少大于等于6位', trigger: 'blur' },
          {
            validator: (rule, value, callback) => {
              if (value === '') {
                callback(new Error('请输入密码'));
              } else {
                if (this.form.password2 !== '') {
                  this.$refs.form.validateField('password2');
                }
                callback();
              }
            }, trigger: 'blur'
          }
        ],
        password2: [
          { required: true, message: '请设置密码', trigger: 'blur' },
          { min: 6, message: '密码长度至少大于等于6位', trigger: 'blur' },
          {
            validator: (rule, value, callback) => {
              if (value === '') {
                callback(new Error('请再次输入密码'));
              } else if (value !== this.form.password1) {
                callback(new Error('两次输入密码不一致!'));
              } else {
                callback();
              }
            }, trigger: 'blur'
          }
        ],
        email: [
          { required: true, message: '请填写吗喽箱', trigger: 'blur' },
          {  type: 'email', message: '请填写正确吗喽箱', trigger: 'blur' }
        ],
        region1: [
          { required: true, message: '请选择城市', trigger: 'change' },
        ],
        region2: [
          { required: true, message: '请选择地区', trigger: 'change' },
        ],
        agree: [{ required: true, message: '请先同意', trigger: 'blur' }]
      }
    };
  },
  methods: {
    onSubmit() {
      this.$refs.form.validate((valid) => {
        if (valid) {
          console.log(this.form);
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },
  },
};
</script>
<style scoped>
.page {
  background-image: url(../assets/111.jpeg);
  background-repeat: no-repeat;
  background-size: 100% auto;
}

.zhuce-form {
  background: #ffffffbb;
  border-radius: 0 0 20px 20px;
  padding: 20px;
}

h3 {
  background: #409EFF;
  color: #fff;
  padding: 20px;
  border-radius: 20px 20px 0 0;
  margin-bottom: 0;
}
</style>